<template>
  <view class="student-card" :class="{selected: selected}">
    <text>{{ name }} ({{ grade }})</text>
  </view>
</template>

<script>
export default {
  props: {
    name: String,
    grade: String,
    selected: Boolean
  }
}
</script>

<style lang="scss" scoped>
.student-card {
  background-color: #f8f9fa;
  border-radius: 15rpx;
  padding: 15rpx 25rpx;
  margin: 10rpx;
  font-size: 28rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  
  &.selected {
    background-color: #e3f2fd;
    color: #1976d2;
    font-weight: bold;
    transform: translateY(-10rpx);
    box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
  }
}
</style>